<template>
    <div>
        <!-- Header部分 -->
        <header-com></header-com>
        <!-- Header部分 -->
		<!-- <section class="odd-home-section"> -->
			<!-- <div style="display: block; position: absolute; width: 100%;transform: translate(0px, 0px);"> -->
				<div class="videobox">
					<video id="bg-video" crossorigin="anonymous"  muted="muted" loop="" autoplay="" height="100%" width="100%">
						<source src="https://gw.alipayobjects.com/mdn/rms/afts/file/A*obX5QbrKxZwAAAAAAAAAAAAAARQnAQ" type="video/mp4">
					</video>
				</div>
				<div class="odd-text-content">
					<div class="odd-text-warpper">
						<div class="text-content">
						    <h1>
						        <!-- {{Hello}}, -->
						        <span v-text="$t('homepage.part1')+','"></span>
						        <br />
						        <span id="typed-strings">
						            <!-- <span>I'm Lykang.</span> -->
						            <span v-text="$t('homepage.part2')"></span>
						            <!-- <span>Web Designer</span> -->
						            <span v-text="$t('homepage.part3')"></span>
						            <!-- <span>Work in GuangZhou</span> -->
						            <span v-text="$t('homepage.part4')"></span>
						        </span>
						        <span id="typed"></span>
						    </h1>
						</div>
					</div>
				</div>
			<!-- </div> -->
		<!-- </section> -->
        
    </div>
</template>

<script>
import Header from './public/Header'
export default {
    components: {
        'header-com': Header
    },
    methods: {
        type(strings) {
            var typed = new Typed('#typed', {
                stringsElement: '#typed-strings',
                typeSpeed: 100,
                backSpeed: 20,
                loop: true,
                loopCount: Infinity
            });
        },
        // movingBackgroundImage() {
        //     var bg = document.querySelector('.hero-full-container');
        //     var windowWidth = window.innerWidth / 5;
        //     var windowHeight = window.innerHeight / 5;
        //     bg.addEventListener('mousemove', (e) => {
        //         var mouseX = e.clientX / windowWidth;
        //         var mouseY = e.clientY / windowHeight;
        //         bg.style.transform = `translate3d(-${mouseX * 1.5}px, -${mouseY * 1.5}px, 0)`;
        //     });
        // }
    },
    beforeCreate() {
        $("body")[0].className = 'minimal'
    },
    beforeDestroy() {
        document.body.removeAttribute("class", "nimimal")
    },
    mounted() {
        this.type() // 打字动画
        //this.movingBackgroundImage() // 背景图动画
        this.$axios({
            url: '/index/visit',
            method: 'post',
            data: {}
        }).then(res => {
            // console.log(res); // 这里打个彩蛋
        })
		window.onresize = function() {
			console.log("hei");
			var n = document.documentElement.clientHeight,
				e = document.documentElement.clientWidth,
				t = n / e;
			$(".page,.fullvid").height(n);
			// 9/16=0.5625视频宽高比
			if (t > .5625) {
				$(".videobox").width(n / .5625);
				$(".videobox").height(n);
				$(".videobox").css("marginLeft", 0 - (n / .5625 - e) / 2);
				// $(".videobox").css("left", 0 - (n / .5625 - e) / 2);
				$(".videobox").css("marginTop", 0);
			}
			else if (t < .5625) {
				$(".videobox").width(e);
				$(".videobox").height(.5625 * e);
				$(".videobox").css("marginLeft", 0);
				$(".videobox").css("marginTop", 0 - (.5625 * e - n) / 2);
			}
			else {
				$(".videobox").width(e);
				$(".videobox").height(n);
				$(".videobox").css("marginLeft", 0);
				$(".videobox").css("marginTop", 0);
			}
		}
    }
}
</script>

<style lang="less" scoped>
.hero-full-container {
    background-image: url("http://example.kkslide.fun/space.jpg");
    // background-image: url("http://example.kkslide.fun/space-2.jpg");
}
.text-content {
    h1 {
        word-wrap: break-word;
        word-break: break-all;
    }
}
body *{
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.odd-home-section{
	position: relative;
	height: 100vh;
	background-color: #fff;
	background-size: cover;
}
.odd-text-content{
	position: absolute;
	top: 45%;
	left: 0;
	right: 0;
	z-index: 2;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}

.odd-text-warpper{
	text-align: center;
}

/* 小屏幕（平板，大于等于 768px） */
@media screen and (max-width: 768px)  {
	.text-content h1{
	    margin-bottom: 14px;
	    padding: 0 25px;
	    font-size: 26px;
		color: #fff;
		font-weight: 300;
		line-height: normal;
	}
}

/* 中等屏幕（桌面显示器，大于等于 992px） */
@media screen and (min-width: 768px) {
	.text-content h1 {
		color: #fff;
		font-weight: 300;
		font-size: 60px;
		line-height: normal;
		margin-bottom: 32px;
	}
}

/* 大屏幕（大桌面显示器，大于等于 1200px） */
</style>

<style type="text/css">

</style>